
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>个人名片卡片（极简 CSS）</title> <style> /* 只有最基本的样式，方便初学者理解 */ :root { --avatar: 90px; --bg: #f5f7fb; --card: #fff; --text: #111; --muted: #555; }
{ box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #e6e9f5;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: var(--text);
}

.card {
width: min(440px, 92vw);
background: var(--card);
border: 1px solid #ddd;
border-radius: 8px;
padding: 12px;
display: grid;
grid-template-columns: var(--avatar) 1fr;
gap: 12px;
align-items: center;
}

.avatar {
width: var(--avatar);
height: var(--avatar);
border-radius: 50%;
overflow: hidden;
background: #ddd;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.info { padding: 2px 0; }

.name { margin: 0 0 4px 0; font-size: 1.05rem; font-weight: 700; }
.title { margin: 0 0 8px 0; color: var(--muted); font-size: .95rem; }

.list { list-style: none; padding: 0; margin: 0; }
.list-item { display: flex; align-items: center; gap: 6px;
padding: 6px 8px; border: 1px solid #eee; border-radius: 6px;
background: #f9f9f9; }

.icon { width: 16px; height: 16px; display: inline-block; }

/* 简化的内联 SVG 图标作为背景 */
.phone { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999"><path d="M6.62 10.79a15.09 15.09 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.54.57 1 1 0 011 1v3.5a1 1 0 01-1 1A16 16 0 013 5a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.54 1 1 0 01-.24 1.01l-2.21 2.24z"/></svg>') no-repeat center/contain;
}
.email { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999"><path d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') no-repeat center/contain;
}
.website { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23999"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h2v2h-2V7zm-4 0h2v2H9V7zm0 4h2v2H9v-2zm4 0h2v2h-2v-2z"/></svg>') no-repeat center/contain;
}

/* 窄屏：头像放上方，其余信息在下方 */
@media (max-width: 560px) {
.card { grid-template-columns: 1fr; padding: 12px; }
.avatar { width: 110px; height: 110px; justify-self: center; margin: 0 auto; }
}

</style> </head> <body> <main class="card" aria-label="个人名片卡片"> <div class="avatar" aria-label="头像"> <img src="https://via.placeholder.com/150" alt="个人头像" /> </div> <section class="info" aria-label="个人信息"> <p class="name">张三</p> <p class="title">前端开发工程师</p> <ul class="list" aria-label="联系方式"> <li class="list-item"> <span class="icon phone" aria-hidden="true"></span> <span>+86 138 1234 5678</span> </li> <li class="list-item"> <span class="icon email" aria-hidden="true"></span> <span>zhangsan@example.com</span> </li> <li class="list-item"> <span class="icon website" aria-hidden="true"></span> <span>www.example.com</span> </li> </ul> </section> </main> </body> </html>
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <script src="script.js"></script>-->
<!--</head>-->
<!--<body>-->
<!--<input type="button" value="delete" onclick="del()">-->
<!--<script>-->
<!--function del() {-->
<!--   let f = confirm("是否删除");-->
<!--   if (f) {-->
<!--   alert("删除成功");-->
<!--   }-->
<!--}-->
<!--无参方法-->
<!--function showInfo() {-->
<!--    alert("hello world");-->
<!--}-->
<!--    function getSum() {-->
<!--&lt;!&ndash;        var a = document.getElementById("a").value;&ndash;&gt;-->
<!--&lt;!&ndash;        var b = document.getElementById("b").value;&ndash;&gt;-->
<!--&lt;!&ndash;        var sum = a + b;&ndash;&gt;-->
<!--&lt;!&ndash;        document.getElementById("sum").innerHTML = sum;&ndash;&gt;-->
<!--let num1 = prompt("Enter first number");-->
<!--let num2 = prompt("Enter first number");-->
<!--let sum = parseInt(num1) + parseInt(num2);-->
<!--alert(sum);-->
<!--    }-->
<!--</script>-->
<!--<input type="button" onclick="getSum()" value="R">-->
<!--</body>-->
<!--</html>-->